
import React,{ Component } from 'react';
import { Form, Icon, Input, Button,InputNumber,TreeSelect } from 'antd';
const FormItem = Form.Item;
const TreeNode = TreeSelect.TreeNode;
//水平登录栏，常用在顶部导航栏中
class TestTreeSelect2 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            //arr: [],
            //defaultArr: [1,2]
        }
    }
    componentDidMount() {
        //this.props.form.validateFields();
    }
    /**
     *
     * onSubmitEvent() 提交
     */
    onSubmitEvent(e) {
        e.preventDefault();
        console.log("提交");
        this.props.form.validateFields((err,value)=>{
            if(!err) {
               console.log('得到的值是：',value);
            }else {
                console.log('错误提示：',err);
            }
        });
    }
    handleChange(value) {

        let filterArr = value && value.filter((item,index)=>{
            return item !== '工单组';
        })
        this.setState({
            value: filterArr,
        })
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <Form onSubmit={ this.onSubmitEvent.bind(this)}>
                <FormItem>
                    <TreeSelect
                        //defaultValue = { this.state.defaultArr }
                        value={ this.state.value }
                        style={{ width: 600 }}
                        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                        placeholder="Please select"
                        treeDefaultExpandAll
                        showSearch
                        allowClear
                        multiple
                        onChange = { this.handleChange.bind(this) }
                    >
                        <TreeNode value="开发组" title="开发组" key="0">
                            <TreeNode value="开发组1" title="开发组1" key="0-1"></TreeNode>
                            <TreeNode value="开发组2" title="开发组2" key="0-2"></TreeNode>
                        </TreeNode>
                        <TreeNode value="测试组" title="测试组" key="1">
                            <TreeNode value="测试组1" title="测试组1" key="1-1"></TreeNode>
                            <TreeNode value="测试组2" title="测试组2" key="1-2"></TreeNode>
                        </TreeNode>
                        <TreeNode value="工单组" title="工单组" key="3">
                            <TreeNode value="工单组1" title="工单组1" key="3-1"></TreeNode>
                            <TreeNode value="工单组2" title="工单组2" key="3-2"></TreeNode>
                        </TreeNode>
                        <TreeNode value="AI组" title="AI组" key="4">
                            <TreeNode value="AI组1" title="AI组1" key="4-1"></TreeNode>
                            <TreeNode value="AI组2" title="AI组2" key="4-2"></TreeNode>
                        </TreeNode>
                    </TreeSelect>
                </FormItem>
                <FormItem>
                    <Button
                        type="primary"
                        htmlType="submit"
                    >
                        提交
                    </Button>
                </FormItem>
            </Form>
        )
    }
}
export default Form.create()(TestTreeSelect2);

